<template>
    <div>
        <h2>户型信息</h2>
        <div>
            户型名称:<input type="text" v-model="list.Fname"/>
            户型结构:<select v-model="list.Gou">
                            <option>请选择</option>
                            <option>两居室</option>
                            <option>三居室</option>
                            <option>大平层</option>
            </select>
            <input type="button" value="查询"  class="btn btn-success" @click="showall"/>

            <input type="button" value="新增户型"  class="btn btn-info" @click="router.push('/demo')"/>

            <input type="button" value="批量删除"  class="btn btn-danger" @click="DelAll"/>

            <input type="button" value="导出"  class="btn btn-warning" @click="execport"/>
        </div>

        <table class="table table-bordered">
            <tbody>

                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkedall"/></td>
                    <td>所属项目</td>
                    <td>户型名称</td>
                    <td>户型结构</td>
                    <td>建筑面积</td>
                    <td>套内面积</td>
                    <td>户型图</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
                
                <tr v-for="item in data.list" :key="item.Id">
                    <td><input type="checkbox" v-model="ids" :value="item.Id"/></td>
                    <td>{{item.Name}}</td>
                    <td>{{item.Fname}}</td>
                    <td>{{item.Gou}}</td>
                    <td>{{item.Area}}</td>
                    <td>{{item.Farea}}</td>
                    <td><a :href="item.Photo">查看</a></td>
                    <td>{{moment(item.CreateTime).format('YYYY-MM-DD')}}</td>
                    <td>
                        <input type="button" value="删除"  class="btn btn-danger" @click="del(item.Id)"/>
                        <input type="button" value="编辑"  class="btn btn-info" @click="update(item.Id)"/>
                    </td>
                </tr>

            </tbody>
        </table>


        <div>

            <span>共<b>{{data.totaCount}}</b>条</span>
            <span>每页<b>{{list.PageSizer}}</b>条</span>
            <span>共<b>{{list.PageIdenx}}/{{data.totaPage}}</b>页</span>

            <input type="button" value="首页" @click="sopage(1)"/>
            <input type="button" value="上一页" @click="sopage(list.PageIdenx-1)"/>
            <span v-for="item in data.totaPage" @click="sopage(item)">{{item}}</span>
            <input type="button" value="下一页" @click="sopage(list.PageIdenx+1)"/>
            <input type="button" value="尾页" @click="sopage(data.totaPage)"/>
            <input type="number" v-model="list.PageIdenx"/>
            <input type="button" value="跳转" @click="showall"/>

            <select v-model="list.PageSizer" @change="showall">
                <option :value="item" v-for="item in arr">每页{{item}}条</option>
            </select>

        </div>


    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';
import {useUserStore} from '@/stores/user'

let router = useRouter();
let route = useRoute();


const a = useUserStore();

let list:any = reactive({
    PageIdenx:1,
    PageSizer:2,
    Fname:'',
    Gou:''
})

let data:any = reactive({
    list:[],
    totaCount:0,
    totaPage:0
})

let arr:any = ref([2,4,6])


onMounted(()=>{
    if(a.userInfo.Id)
    {
        showall();
    }
    else
    {
        router.push('/admin')
    }
   
})

let checked:any=ref(false);
let ids:any=ref([])

//显示
const showall = ()=>{
    axios({
        url:'https://localhost:7143/api/House/HouseShow',
        method:'get',
        params:list
    })
    .then((res)=>{
        Object.assign(data,res.data);
    })
    .catch((err)=>{
        console.log(err);
    })
}

//分页
const sopage = (num:any)=>{
    if(num<1)
    {
        list.PageIdenx = 1;
        return;
    }
    if(num>data.totaPage)
    {
        list.PageIdenx = data.totaPage;
        return;
    }
    list.PageIdenx = num;
    showall();
}


//删除
const del = (id:any)=>{
    let f = confirm('确认删除吗？')
    if(f == true)
    {
        axios({
            url:'https://localhost:7143/api/House/HouseDel',
            method:'delete',
            params:{id:id}
        })
        .then((res)=>{
            if(res.data > 0)
            {
                alert('删除成功');
                showall();
                return;
            }
            else
            {
                alert('删除失败');
                return;
            }
        })
        .catch((err)=>{
            console.log(err);
        })
    }
}


//编辑跳转页面
const update = (id:any)=>{
    router.push({
        path: '/update',
        query:{id:id}
    })
}

//全选全不选
const checkedall = ()=>{
    checked.value = !checked.value;
    if(checked.value == true)
    {
        ids.value=data.list.map((item:any)=>{
            return item.Id
        })
    }
    else
    {
        ids.value=[];
    }
}

//批量删除
const DelAll = ()=>{
    if(ids.value.length == 0)
    {
        alert('请至少选择一项')
        return;
    }
    let f = confirm('确认要删除吗?');
    if(f)
    {
        axios({
            url:'https://localhost:7143/api/House/HouseDelAll',
            method:'delete',
            params:{ids:ids.value.toString()}
        })
        .then((res)=>{
            if(res.data > 0)
            {
                alert('删除成功');
                showall();
            }
            else
            {
                alert('删除失败')
            }
        })
        .catch((err)=>{
            console.log(err)
        })
    }
}


//导出
const execport = ()=>{
    location.href = `https://localhost:7143/api/House/ExecPort?PageIdenx=${list.PageIdenx}&PageSizer=${list.PageSizer}&Fname=${list.Fname}&Gou=${list.Gou}`
}


</script>

<style scoped>
b{
    color: red;
}
span{
    margin: 0 10px;
}
input[type="button"]
{
    margin: 0 5px;
}


</style>